<template>
  <div class="order">
    <div class="order_intro" v-html="msg"></div>
    <div class="order_score">
      <div class="order_title">
        评分&nbsp;&nbsp;&nbsp;
        <i @click="setrate(1)" v-bind:class="[rate>0?'iconfont order_star icon-star':'iconfont order_star icon-star5']"></i>
        <i @click="setrate(2)" v-bind:class="[rate>1?'iconfont order_star icon-star':'iconfont order_star icon-star5']"></i>
        <i @click="setrate(3)" v-bind:class="[rate>2?'iconfont order_star icon-star':'iconfont order_star icon-star5']"></i>
        <i @click="setrate(4)" v-bind:class="[rate>3?'iconfont order_star icon-star':'iconfont order_star icon-star5']"></i>
        <i @click="setrate(5)" v-bind:class="[rate>4?'iconfont order_star icon-star':'iconfont order_star icon-star5']"></i>
      </div>

      <textarea class="order_text" rows="4" placeholder="请输入您的评价" v-model="content"></textarea>

      <button class="order_btn" @click="submit">确认提交</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
let qs = require('qs');
export default {
  name: 'HelloWorld',
  data () {
    return {
      rate: 0,
      content: '',
      msg: '<div>感谢您选择e歌上门洗车服务！</div><div>本次服务，您节水0.15吨，感谢您对环保事业的贡献！</div><div>请确认订单，并为小伙伴本次提供的服务进行评价：</div>',
    }
  },
  mounted(){
    console.log(this.$route.params.order_id);
    this.$root.share();
  },
  methods: {
    setrate: function (num) {//打分
      if(this.rate==num){
          return
      }
      this.rate=num
    },
    submit: function () {
      console.log("提交");
      // this.$router.push({path:'/'})
      var that = this;
     
      axios.post(global.api.order.customer.comment,{
        uuid: localStorage.getItem('carWashUuid'),
        order_id: global.order_id,
        score: that.rate,
        comment_detail: that.content,
      })
      .then(function(res){
        console.log("ordering then");
        console.log(res.data);
        console.log(res.data.code);
        if (res.data.code == 0) {

          console.log('---');
          that.$router.push({path:'/'})
        }
      })
      .catch(function(res){
        console.log("ordering catch");
        console.log(res);
      }) 
    }
  }
}
</script>

<style scoped>
  .order_intro{
    font-size: 0.9rem;
    text-align: left;
    line-height: 2rem;
    padding: 5% 1.5rem;
    margin: 0;
    border-bottom: 1px solid #B3B3B4;
  }
  .order_score{
    padding: 5% 1.5rem;
  }
  .order_title{
    text-align: left;
    font-size: 1.05rem;
  }
  .order_star{
    font-size: 1rem;
    color: #2ecc80;
  }
  .order_text{
    width: 90%;
    border: 1px solid #B3B3B4;
    padding: 1rem 5%;
    margin: 1rem 0;
    font-size: 1.1rem;
  }
  .order_text:focus,.order_btn:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .order_btn{
    width: 8.2rem; 
    height: 2.5rem;
    line-height: 2.5rem;
    border: none;
    background-color: #2ecc80;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 1rem;
  }
</style>
